<template>
  <div class="wrapper" :class="{'margin-top': isAbsolute}">
    <swiper :options="swiperOption">
      <swiper-slide v-for="page of pages" :key="page.id">
        <div class="item" v-for="item of page.list" :key="item.id">
          <div class="item-img-wrapper">
            <img class="item-img" :src="item.imgUrl">
          </div>
          <div class="item-desc">{{item.desc}}</div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
export default {
  name: 'HomeSwiper',
  props: {
    isAbsolute: Boolean
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
      swiperList: [{
        id: '001',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '002',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '003',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '004',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '005',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '006',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '007',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '008',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '009',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '010',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '011',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '012',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }, {
        id: '013',
        imgUrl: 'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg',
        desc: '美食'
      }]
    }
  },
  computed: {
    pages () {
      let pages = []
      this.swiperList.forEach((val, index) => {
        index = Math.floor(index / 10)
        if (!pages[index]) {
          pages[index] = {
            id: 'pages' + index,
            list: []
          }
        }
        pages[index].list.push(val)
      })
      return pages
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-container
    position absolute
    top 0
    right 0
    left 0
    bottom 0
  .wrapper >>> .swiper-wrapper
    padding-bottom .4rem
    box-sizing border-box
  .wrapper >>> .swiper-pagination-bullets
    bottom .02rem
  .wrapper >>> .swiper-pagination-bullet
    width .12rem
    height .12rem
  .margin-top
    margin-top 1rem
  .wrapper
    position relative
    height 0
    padding-bottom 47.2%
    overflow hidden
    .item
      position relative
      width 20%
      height 50%
      float left
      .item-img-wrapper
        position absolute
        top 0
        bottom .5rem
        left 0
        right 0
        text-align center
        .item-img
          height 100%
      .item-desc
        position absolute
        bottom 0
        left 0
        right 0
        line-height .5rem
        text-align center
        color #666666
        font-size .25rem
</style>
